前端面试之JavaScript（总结）

1. JS基本的数据类型和引用类型

• 基本数据类型：number、string、null、undefined、boolean、symbol -- 栈

• 引用数据类型：object、array、function -- 堆

• 两种数据类型存储位置不同

• 原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；

• 引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；

• 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。

• 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

2.介绍JS的内置对象

• 数据封装类对象：Object、String、Number、Boolean、Array

• 其他对象：Function、Data、Math、Arguments、RegExp、Error

• ES6新增对象：Promise、Proxy、Map、Set、Symbol、Reflect

3.说几条JavaScript的基本规范

• 变量和函数在使用前声明

• 语句结束后添加分号

• 代码段使用{}包裹

• 以大写字母开头定义构造函数，以全大写定义常量

• 用{} 和 []声明对象和数组

• 使用===和!==来比较true和false或者数字值

4.eval是做什么的

• 他的功能是把对应的字符串解析成JS代码并运行；

• 他不安全，而且非常耗能（执行两次，一次解析成JS代码，一次执行）

5.对闭包的理解

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数里创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部

6.http状态码有哪些

简单版

完整版

7.描述浏览器渲染的过程，DOM书和渲染树的区别

浏览器渲染过程：

• 解析HTML构建DOM，并行请求css、image、js

• css文件下载完成，开始构建CSSOM（CSS树）

• CSSOM构建结束后，和DOM一起生成Render Tree（渲染树）

• 布局（layout）：计算出每个节点在屏幕中的位置

• 显示：通过显卡把页面画到屏幕上

DOM树和渲染树的区别：

• DOM树与HTML标签一一对应，包括head和隐藏元素

• 渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个独立节点都有对应的css属性

8.如何最小化重绘（repaint）和回流（reflow）

• 需要创建多个DOM节点时，使用DocumentFragment创建完成后一次性的加入document

• 缓存layout属性值，减少回流次数，如const offsetLeft=element.offsetLeft

• 尽量避免使用table布局（table元素一旦触发回流就会导致table里所有的其他元素回流）

• 避免使用css表达式，因为每次调用都会重新计算值（也会重新加载页面）

• 尽量使用css属性简写

• 将多次修改元素样式合并成一次操作

9.介绍JavaScript的原型、原型链？有啥特点

原型：

• JavaScript的所有对象中都包含了一个 (__proto__ ) 内部属性，这个属性所对应的就是该对象的原型

• JavaScript的函数对象，除了原型 (__proto__) 之外，还预置了 prototype 属性

• 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型( __proto__)。

原型链：

• 当一个对象调用的属性/方法自身不存在时，就会去自己(__proto__ )关联的前辈 prototype 对象上去找

• 如果没找到，就会去该 prototype 原型 ( __proto__) 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”

原型特点：

• JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

10.JavaScript如何实现继承

构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

ES6使用extends继承

实例继承：将子对象的prototype指向父对象的一个实例

原型继承

拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

11.什么是window对象，什么是Document对象

• Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。

• 我们创建的所有对象、函数、变量都是 Window 对象的成员。

• Window 对象的方法和属性是在全局范围内有效的。

• Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）

• Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问

• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

12. 在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

• 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）

• 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获

• 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

13. 事件的代理/委托

• 事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

优点：

可以减少事件注册，节省大量内存占用

可以将事件应用于动态添加的子元素上

缺点：

使用不当会造成事件在不应该触发时触发

14. 编写一个方法 求一个字符串的字节长度

15. 列举一下JavaScript数组和对象有哪些原生方法？

数组：

对象：

扩展阅读

来源：https://segmentfault.com/a/1190000015294769

版权声明：文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除或授权事宜